解决高德地图label添加的点击事件在移动端无效
近日工作中需要用到高德地图在PC端和移动端同时适配的需求,在PC端撸代码和调试一切顺利,但是在将项目在平板中测试
时,发现绑定在label中的click事件无法触发;通过各种调试发现应该是高德在移动端的marker上屏蔽了click事件;
原代码如下:
self.pointers[item].setLabel({
//label默认蓝框白底左上角显示,样式className为:amap-marker-label
offset: new AMap.Pixel(25, 5), //右侧
zIndex: 99,
content:
"<div class='map-label'><span class='map-label-name'>" +
self.allData.filter(b => b.seqno == item)[0].shortTitle +
"</span><a href='javascript:void(0)' class='map-label-link' id='label-" +
item +
"' onclick='clickLink(this, event)' seqno='" +
item +
"'><i class='iconfont icon-arrow-double-right'></i></a></div>"
});
解决方案:手动给label添加touchstart事件
let btn = document.getElementById("label-" + item);
btn.addEventListener(
"touchstart",
function(event) {
self.$router.push({
path: "/screenProject",
query: { seqno: item }
});
},
false
);
特此记录一下踩坑过程!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。